<template>
    <div>
        <el-form
            v-if="reset"
            ref="form"
            :model="formData"
            style="margin-right: 12px"
            :size="formSettingsData.size"
            :inline="formSettingsData.inline"
            :disabled="formSettingsData.disabled"
            :label-width="formSettingsData.labelWidth + 'px'"
            :show-message="formSettingsData.showMessage"
            :inline-message="formSettingsData.inlineMessage"
            :label-position="formSettingsData.labelPosition"
            :hide-required-asterisk="formSettingsData.hideRequiredAsterisk"
        >
            <div
                v-for="(item, i) in json"
                :key="item.type + i"
                class="item-control"
                :class="[item.prev ? 'prev-control' : '', item.selected ? 'change-setting': '']"
                :style="formSettingsData.inline ? {display: 'inline-block'} : {}"
                @click.stop="changeSetting(item)"
                @mouseover="mouseoverHandle(i)"
                @mouseup="mouseupHandle(item, $event)"
                @mousedown="mousedownHandle(item, $event)"
            >
                <form-item
                    v-if="item !== null && typeof item !== 'undefined'"
                    :item="item"
                    :base-form-data="formData"
                    :style="formSettingsData.inline ? {display: 'inline-block'} : {}"
                    @name-change="nameChange"
                />
            </div>
        </el-form>
    </div>
</template>

<script>
import FormItem from "./FormItem";
import Constants from "../../utils/Constants";
export default {
    name: "FormStructure",
    components: {FormItem},
    props: {
        json: {
            type: Array,
            default: () => []
        },
        formSettingsData: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            Constants,
            reset: true,
            formData: { }
        }
    },
    watch: {
        json: {
            handler() {
                for (let i = 0; i < this.json.length; i++) {
                    let e = this.json[i];
                    if (typeof this.formData[e.name] === 'undefined') {
                        if (e.type === Constants.slider || e.type === Constants.inputNumber) {
                            this.formData = {
                                ...this.formData,
                                [e.name]: 0
                            };
                        } else if (e.type === Constants.switch) {
                            this.formData = {
                                ...this.formData,
                                [e.name]: false
                            };
                        } else if (e.type === Constants.checkbox) {
                            this.formData = {
                                ...this.formData,
                                [e.name]: []
                            };
                        } else {
                            this.formData = {
                                ...this.formData,
                                [e.name]: ''
                            };
                        }
                    }
                }
                this.$emit('formChange', this.formData);
            },
            deep: true
        }
    },
    methods: {
        mouseoverHandle(index) {
            let arr = this.json;
            if (arr.filter(e => e.prev).length === 0) {
                // 当光标放在设计区域内的表单控件上时，如果没有正在预览的内容，跳出
                return;
            }
            let prev = null;
            // 删除预览的
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].prev) {
                    prev = JSON.parse(JSON.stringify(arr[i]));
                    arr.splice(i, 1);
                    break;
                }
            }
            // 添加预览对象至列表，
            arr.splice(index, 0, prev);
            this.$store.commit('changeCurrentIndex', index);
        },
        mouseupHandle(e, event) {
            if (event.button !== 0) {
                return;
            }
            // 还原对象状态
            if (e.inBoxMove) {
                e.prev = false;
                e.inBoxMove = false;
            }
        },
        mousedownHandle(e, event) {
            if (event.button !== 0) {
                return;
            }
            this.json.forEach(e => e.selected = false);
            e.prev = true;
            // 代表是该页面更改的，还原时还原该页面更改的对象
            e.inBoxMove = true;
        },
        changeSetting(e) {
            this.json.forEach(e => e.selected = false);
            e.selected = true;
            this.$store.commit('changeFormControlsSettingData', e);
        },
        nameChange(item) {
            let current = this.json.filter(e => e.id === item.id)[0];
            let type = current.type;
            this.reset = false;
            current.type = undefined;
            this.$nextTick(() => this.$nextTick(() => {
                this.reset = true;
                current.type = type;
            }));
            this.formData[item.newName] = this.formData[item.oldName];
            delete this.formData[item.oldName];
        }
    }
}
</script>

<style scoped>
    .prev-control {
        opacity: 0.6;
        border: 1px dashed rgb(58, 111, 241) !important;
    }
    .item-control {
        padding: 20px 10px 0 0;
        border: 1px dashed white;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .el-form-item {
        margin: 0;
    }
    .change-setting {
        border: 1px dashed rgb(58,111,241) !important;
    }
</style>
